<template>
	<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
		:dots-styles="dotsStyles" field="content">
		<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
			<swiper-item v-for="(item, index) in slidesNew" :key="index">
				<view class="swiper-item" :class="'swiper-item' + index">
					<img :src="item.picture" class="slide" style="width: 100%;height:150px;" />
				</view>
			</swiper-item>
		</swiper>
	</uni-swiper-dot>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';

	const swiperDotIndex = ref('')
	import {
		articleList,
		gettagList,
		getAdvertisement
	} from './api/api';

	const change=(e) => {
		swiperDotIndex.value = e.detail.current
	}
	const click=(e) => {
		swiperDotIndex.e = e
	}
	const slidesNew = ref([]);

	onMounted(async () => {
		try {
			const [fetchedCarouselData] = await Promise.all([

				getAdvertisement(),
			]);
			slidesNew.value = fetchedCarouselData.data;
			console.log(fetchedCarouselData.data);
			console.log(slidesNew);
		} catch (error) {
			console.error('Error fetching data:', error);
		}
	});
</script>
<style scoped>

</style>